import styles from './index.less';
import Container from '@/components/container';
import { IRouteComponentProps, useSelector, Link, useDispatch, KnowledgeModelState } from "umi";
import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
import { Button, message, Popconfirm } from 'antd';
import { useEffect } from 'react';


const editor: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const id = match.params.id;
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  const { knowledgeDetail } = useSelector((state: { knowledge: KnowledgeModelState, }) => state.knowledge);
  console.log(knowledgeDetail);

  useEffect(() => {
    dispatch({
      type: 'knowledge/KnowledgeDetail',
      payload: id
    })

  }, [id])
  // 确认
  function confirm() {
    window.history.go(-1)
  }
 // 取消
  function cancel(e: any) {
    console.log(e);
    message.error('Click on No');
  }

  return <div className={styles.createContainer}>
    <div className={styles.editor_left}>
      <div className={styles.editor_left_header}>
        <div >
          <span>
            <Popconfirm
              title="确认关闭？如果有内容变更，请先保存。"
              onConfirm={() => { confirm() }}
              onCancel={cancel}
              okText="确认"
              cancelText="取消"
            >
              <CloseOutlined />
            </Popconfirm>
          </span>
          <div className={styles.imgs}>
            <span><img src={knowledgeDetail.cover} alt="" /></span>
            <span>{knowledgeDetail.title}</span>
          </div>
          <span><SettingOutlined /></span>
        </div>
        <div><Button style={{ width: "100%" }}>保存</Button></div>
        <div>
          <span>一篇文章</span>
          <Button style={{ width: "66px" }}>新建</Button>
        </div>
        <div role="separator"></div>
      </div>
      <div className={styles.editor_left_main}></div>
    </div>
    <div className={styles.editor_right}>
      <Container />
    </div>

  </div>
}

export default editor;
